<template>
	<u-popup v-model="showSelf" 
      mode="bottom" 
      border-radius="14" 
      :closeable="true" 
      :safe-area-inset-bottom="true"
      @close="onClose" 
    >
		<view class="bg-white spec-contain">
			<view class="spec-header row">
				<custom-image 
                  class="goods-img mr20" 
                  radius="10rpx" 
                  :src="checkedGoods.image" 
                  @tap="previewImage(checkedGoods.image)" 
                />
				<view class="goods-info flex1">
					<view class="ornament row">
						<price-format 
                          :first-size="46" 
                          :second-size="32" 
                          :subscript-size="32" 
                          :price="group ? checkedGoods.team_price : checkedGoods.price" 
                          :weight="500"
                        />
					</view>
                    
                    <view>
                        <view class="sm" v-show="showStock">
                        	库存：{{checkedGoods.stock}}件
                        </view>
                        <view class="sm muted">
                        	<text>已选择：{{checkedGoods.spec_value_str}}，{{goodsNum}}件</text>
                        </view>
                    </view>
				</view>
			</view>
            
            
			<view class="spec-main">
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="spec-list">
						<view v-for="(item, index) in specList" :key="index" class="spec">
							<view class="name mb20">{{ item.name }}</view>
							<view class="row wrap">
                                <view 
                                  v-for="(specitem, index2) in item.spec_value"
                                  :key="index2"
                                  :class="'spec-item sm ' + ( specitem.checked ? 'checked' : '' )"
                                  @tap="choseSpecItem(item.id, specitem.id)"
                                >
                                    {{ specitem.value }}
                                </view>                                    
							</view>
						</view>
                        
                        <template v-if="periods.length">
                            <view class="spec">
                                <view class="name mb20">租期</view>
                                <view class="row wrap">
                                    <view 
                                      v-for="(item, index) in periods" 
                                      :key="item.periods_id" 
                                      :class="'spec-item sm ' + ( item.periods_id == period.periods_id ? 'checked' : '' )"
                                      @tap="chosePeriodsItem(item)">
                                        {{ item.name }}
                                    </view>
                                </view>
                            </view>
                        </template>
					</view>
				</scroll-view>
                
                <!-- 数量 -->
<!-- 				<view class="good-num row-between ml20 mr20">
					<view class="label">数量</view>
					<u-number-box 
                      v-model="goodsNum" 
                      :min="1" 
                      :max="checkedGoods.stock" 
                      :disabled="disabledNumberBox" 
                    />
				</view> -->
			</view>
			<view class="btns row-between bg-white">
				<button class="bg-primary br60 white btn" size="lg" @tap="onConfirm">{{ buttonTxt }}</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
        props: {
        	show: {
        		type: Boolean
        	},
        	goods: {
        		type: Object
        	},
        	buttonTxt: {
        		type: String,
        		default: "立即购买"
        	},
            showStock: {
                type: Boolean,
                default: true
            },
            disabledNumberBox: {
                type: Boolean,
                default: false
            },
        },
        
		data() {
			return {
				showSelf: false,        // 是否显示自身Popup
				checkedGoods: {},
				specList: [],
				goodsNum: 1,            // 商品数量
                goods_periods: null,
                periods: [],            // 分期列表
                period: {},             // 选中分期
			};
		},
        
		methods: {
            // 关闭规格选择弹出层
			onClose() {
				this.$emit('close')
			},
            
            // 提交
			onConfirm() {
                const checkedGoods = this.checkedGoods;
                const goodsNum = this.goodsNum;
                
				checkedGoods.goodsNum = goodsNum;
				// this.$emit('confirm', { detail: checkedGoods });
                
				// this.$emit('confirm', { 
    //                 goods_id: ,     // 租赁商品ID
    //                 item_id: ,      // 租赁型号ID
    //                 goods_num: this.goodsNum,    // 租赁数量
    //                 periods_id: ,   // 租赁商品租期ID
    //             });
			},
            
            // 选择期数
            chosePeriodsItem(item) {
                this.period = item;
            },

            // 选择规格
			choseSpecItem(id, specid) {
				this.specList.forEach(item => {
					if (item.spec_value && item.id == id) {
						item.spec_value.forEach(specitem => {
							specitem.checked = 0;
							if (specitem.id == specid) specitem.checked = 1;
						});
					}
				});
				this.specList = [...this.specList]
			},

            // 查看商品图片
			previewImage(current) {
				uni.previewImage({
					current,
					urls: [current]
				});
			}
            
		},
        
        watch: {
        	goods(value) {
        		const specList = value.goods_spec || [];
        		const goodsItem = value.goods_item || [];
                console.log(value);
                
                
                
                
        		specList.forEach(item => {
        			if (item.spec_value) {
        				item.spec_value.forEach((specitem, specindex) => {
        					if (specindex == 0) {
        						specitem.checked = 1;
        					} else {
        						specitem.checked = 0;
        					}
        				});
        			}
        		});
                
                if (value.hasOwnProperty('goods_periods')) {
                    this.periods = value.goods_periods.periods;
                }
                
        		this.specList = specList
        		this.checkedGoods = goodsItem.length ? goodsItem[0] : {};
        	},
        
        	specList(value) {
                const goods_item = this.goods.goods_item;
                
        		const keyArr = [];
        		value.forEach(item => {
        			if (item.spec_value) {
        				item.spec_value.forEach(specitem => {
        					if (specitem.checked) {
        						keyArr.push(specitem.id);
        					}
        				});
        			}
        		});
                
        		if (!keyArr.length) return;
        		let key = keyArr.join(',');
        		let index = goods_item.findIndex(item => {
        			return item.spec_value_ids == key;
        		});
                
        		if (index == -1) return;
        		this.checkedGoods = goods_item[index]
        		this.$emit('change', {
        			detail: goods_item[index]
        		});
        	},
            
        	show(val) {
        		this.showSelf = val
        	}
        },
	};
</script>
<style lang="scss" scoped>
	.spec-contain {
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;
		position: relative;

		.close {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.spec-header {
			padding: 30rpx;
			padding-right: 70rpx;
			align-items: flex-start;
			border: $-solid-border;
			.vip-price {
				margin: 0 24rpx;
				background-color: #FFE9BA;
				line-height: 36rpx;
				border-radius: 6rpx;
				overflow: hidden;
				.price-name {
					background-color: #101010;
					padding: 3rpx 12rpx;
					color: #FFD4B7;
					position: relative;
					overflow: hidden;
					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: -15rpx;
						background-color: #FFE9BA;
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						box-sizing: border-box;
					}
				}
			}
			.goods-img {
				width: 180rpx;
				height: 180rpx;
				flex: none;
			}
		}

		.spec-main {
			.spec-list {
				padding: 30rpx 20rpx;

				.spec-item {
                    box-sizing: border-box;
					line-height: 52rpx;
					padding: 0 20rpx;
					background-color: #F4F4F4;
					border-radius: 60rpx;
					margin: 0 20rpx 20rpx 0;

					&.checked {
                        border: 1rpx solid $-color-primary;
						background-color: #E8F6FF;
						color: $-color-primary;
					}

				}
			}

		}
		.btns {
			height: 120rpx;
			padding: 0 30rpx;
			margin-top: 80rpx;
		
			.add-cart {
				background-color: rgba(36, 163, 255, 0.1);
			}
		
			.btn {
				margin: 0 10rpx;
				flex: 1;
			}
		}
	}
</style>
